<script setup>
import { ref, reactive, nextTick, watch, onMounted } from 'vue'
import request from "../utils/request"
import { useRouter } from 'vue-router'

const router = useRouter()

// 响应式数据
const currentStep = ref(1) // 1: 输入用户名, 2: 选择问题, 3: 回答问题, 4: 重置密码
const username = ref('')
const usernameMsg = ref('')
const selectedQuestions = ref([])
const allQuestions = ref([]) // 所有安全问题
const userQuestions = ref([]) // 用户的安全问题
const answers = reactive({})
const answersMsg = ref('') // 答案验证消息
const newPassword = ref('')
const confirmPassword = ref('')
const passwordMsg = ref('')
const confirmPasswordMsg = ref('')
const resetMsg = ref('') // 重置密码消息
const isLoading = ref(false)
const errorMsg = ref('')

// 预设安全问题
const securityQuestions = [
  { id: 1, question: "你的小学名称是什么？" },
  { id: 2, question: "你的第一个宠物叫什么名字？" },
  { id: 3, question: "你最喜欢的颜色是什么？" },
  { id: 4, question: "你的出生地是哪里？" },
  { id: 5, question: "你最喜欢的食物是什么？" },
  { id: 6, question: "你最喜欢的电影是什么？" },
  { id: 7, question: "你最喜欢的运动是什么？" },
  { id: 8, question: "你的理想职业是什么？" },
  { id: 9, question: "你最喜欢的季节是什么？" },
  { id: 10, question: "你最喜欢的城市是哪里？" }
]

// 动态问题生成
const generateDynamicQuestions = () => {
  return [
    { id: 1001, question: `你的用户名是'${username.value}'吗?` },
    { id: 1002, question: `你的邮箱前缀是'${username.value}'吗?` },
    { id: 1003, question: `你的用户名长度是${username.value.length}位吗?` }
  ]
}

// 检查用户名是否存在
async function checkUsername(autoAdvance = false) {
  if (!username.value.trim()) {
    usernameMsg.value = "请输入用户名"
    return false
  }
  
  try {
    isLoading.value = true
    const { data } = await request.get(`/user/checkUsernameExists?username=${username.value}`)
    
    if (data.code === 200) {
      // 用户名存在
      usernameMsg.value = "用户名存在"
      if (autoAdvance) {
        // 自动跳转到下一步
        currentStep.value = 2
        await getUserSecurityQuestions()
      }
      return true
    } else if (data.code === 501) {
      // 用户名不存在
      usernameMsg.value = "用户名不存在"
      return false
    } else {
      usernameMsg.value = "检查失败，请重试"
      return false
    }
  } catch (error) {
    console.error('检查用户名失败:', error)
    usernameMsg.value = "检查失败，请重试"
    return false
  } finally {
    isLoading.value = false
  }
}

// 获取所有安全问题
async function getAllSecurityQuestions() {
  try {
    isLoading.value = true
    const { data } = await request.get('/user/securityQuestions')
    
    if (data.code === 200) {
      allQuestions.value = data.data
      console.log('获取安全问题成功:', data.data)
    } else {
      console.error('获取安全问题失败:', data.message)
      // 使用动态问题作为备选
      allQuestions.value = generateDynamicQuestions()
    }
  } catch (error) {
    console.error('获取安全问题失败:', error)
    // 使用动态问题作为备选
    allQuestions.value = generateDynamicQuestions()
  } finally {
    isLoading.value = false
  }
}

// 获取用户的安全问题
async function getUserSecurityQuestions() {
  try {
    isLoading.value = true
    const { data } = await request.get(`/user/userSecurityQuestions?username=${username.value}`)
    
    if (data.code === 200) {
      console.log('后端返回的用户安全问题:', data.data)
      userQuestions.value = data.data
      
      // 合并预设问题和动态问题
      const dynamicQuestions = generateDynamicQuestions()
      console.log('动态生成的问题:', dynamicQuestions)
      
      // 如果后端返回的数据有问题，只使用动态问题
      if (data.data && data.data.length > 0) {
        selectedQuestions.value = [...data.data, ...dynamicQuestions]
      } else {
        console.log('后端数据有问题，只使用动态问题')
        selectedQuestions.value = dynamicQuestions
      }
      
      console.log('最终的问题列表:', selectedQuestions.value)
      
      // 调试：检查每个问题的内容
      selectedQuestions.value.forEach((q, index) => {
        console.log(`问题${index}:`, q)
        console.log(`问题${index} ID:`, q?.id)
        console.log(`问题${index} 文本:`, q?.question || q?.questionText)
      })
      
      currentStep.value = 2
      return true
    } else if (data.code === 501) {
      usernameMsg.value = "用户名不存在"
      currentStep.value = 1
    } else {
      console.log('后端返回错误，使用动态问题')
      const dynamicQuestions = generateDynamicQuestions()
      selectedQuestions.value = dynamicQuestions
      currentStep.value = 2
      return true
    }
  } catch (error) {
    console.error('获取安全问题失败:', error)
    console.log('网络错误，使用动态问题')
    const dynamicQuestions = generateDynamicQuestions()
    selectedQuestions.value = dynamicQuestions
    currentStep.value = 2
    return true
  } finally {
    isLoading.value = false
  }
}

// 验证安全问题答案
async function verifyAnswers() {
  console.log('verifyAnswers 被调用')
  console.log('当前 answers 对象:', answers)
  
  const answersArray = Object.values(answers).filter(answer => answer && answer.trim())
  console.log('过滤后的答案数组:', answersArray)
  
  if (answersArray.length < 2) {
    answersMsg.value = "请至少回答2个安全问题"
    console.log('答案数量不足:', answersArray.length)
    return false
  }
  
  try {
    isLoading.value = true
    console.log('发送验证请求...')
    console.log('发送的数据格式:', {
      username: username.value,
      answers: answers
    })
    
    // 尝试两种数据格式
    const answersArray = Object.values(answers).filter(answer => answer && answer.trim())
    console.log('尝试发送数组格式:', answersArray)
    console.log('尝试发送对象格式:', answers)
    
    let response
    // 先尝试数组格式
    response = await request.post('/user/verifySecurityAnswers', {
      username: username.value,
      answers: answersArray
    })
    
    console.log('数组格式响应:', response.data)
    
    // 检查响应数据中的code字段，如果是500（JSON解析错误），则尝试对象格式
    if (response.data && response.data.code === 500 && response.data.message.includes('LinkedHashMap')) {
      console.log('数组格式解析失败，尝试对象格式')
      response = await request.post('/user/verifySecurityAnswers', {
        username: username.value,
        answers: answers
      })
      console.log('对象格式响应:', response.data)
    } else {
      console.log('数组格式请求成功')
    }
    
    console.log('完整响应对象:', response)
    console.log('响应状态码:', response.status)
    console.log('响应数据:', response.data)
    
    const { data } = response
    
    if (data.code === 200) {
      // 检查后端返回的data字段，true表示验证成功，false表示答案错误
      if (data.data === true) {
        answersMsg.value = "验证成功"
        console.log('验证成功，返回 true (后端data: true)')
        return true
      } else {
        answersMsg.value = "答案错误，请重新输入"
        console.log('答案错误，响应码:', data.code, '后端data: false，返回 false')
        return false
      }
    } else if (data.code === 508) {
      answersMsg.value = "答案错误，请重新输入"
      console.log('答案错误，响应码:', data.code, '返回 false')
      return false
    } else if (data.code === 501) {
      answersMsg.value = "用户名不存在"
      console.log('用户名不存在，响应码:', data.code, '返回 false')
      return false
    } else {
      answersMsg.value = `验证失败 (错误码: ${data.code})`
      console.log('验证失败，响应码:', data.code, '返回 false')
      return false
    }
  } catch (error) {
    console.error('验证答案失败:', error)
    console.error('错误详情:', {
      message: error.message,
      response: error.response,
      status: error.response?.status,
      data: error.response?.data
    })
    
    if (error.response) {
      // 服务器返回了错误响应
      answersMsg.value = `服务器错误 (${error.response.status}): ${error.response.data?.message || '未知错误'}`
    } else if (error.request) {
      // 请求已发送但没有收到响应
      answersMsg.value = "网络错误：无法连接到服务器，请检查后端是否运行"
    } else {
      // 其他错误
      answersMsg.value = `请求错误: ${error.message}`
    }
    
    return false
  } finally {
    isLoading.value = false
  }
}

// 重置密码
async function resetPassword() {
  console.log('resetPassword 被调用')
  console.log('当前 answers 对象:', answers)
  
  if (!checkNewPassword()) {
    console.log('密码格式检查失败')
    return false
  }
  
  try {
    isLoading.value = true
    console.log('发送重置密码请求...')
    console.log('发送的数据格式:', {
      username: username.value,
      newPassword: newPassword.value,
      answers: answers
    })
    const { data } = await request.post('/user/resetPassword', {
      username: username.value,
      newPassword: newPassword.value,
      answers: answers
    })
    
    if (data.code === 200) {
      resetMsg.value = "密码重置成功"
      setTimeout(() => {
        router.push('/login')
      }, 2000)
      return true
    } else if (data.code === 508) {
      resetMsg.value = "安全问题答案错误"
      return false
    } else if (data.code === 509) {
      resetMsg.value = "密码强度不够"
      return false
    } else {
      resetMsg.value = "重置失败"
      return false
    }
  } catch (error) {
    console.error('重置密码失败:', error)
    resetMsg.value = "重置失败"
    return false
  } finally {
    isLoading.value = false
  }
}

// 检查新密码格式
function checkNewPassword() {
  const reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,20}$/
  if (!reg.test(newPassword.value)) {
    passwordMsg.value = "密码格式有误（8-20位，必须包含大小写字母、数字、特殊字符）"
    return false
  }
  passwordMsg.value = "密码格式正确"
  return true
}

// 检查确认密码
function checkConfirmPassword() {
  if (newPassword.value !== confirmPassword.value) {
    confirmPasswordMsg.value = "两次密码不一致"
    return false
  }
  confirmPasswordMsg.value = "密码一致"
  return true
}

// 设置安全问题答案
async function setSecurityAnswers() {
  if (selectedQuestions.value.length < 2) {
    alert("请至少选择2个安全问题")
    return false
  }
  
  try {
    isLoading.value = true
    const { data } = await request.post('/user/setSecurityAnswers', {
      username: username.value,
      securityQuestions: selectedQuestions.value.map(q => ({
        questionId: q.id,
        answer: q.answer
      }))
    })
    
    if (data.code === 200) {
      console.log('安全问题设置成功')
      return true
    } else if (data.code === 501) {
      alert("用户名不存在")
      return false
    } else if (data.code === 510) {
      alert("安全问题设置失败")
      return false
    } else {
      alert("设置失败，请重试")
      return false
    }
  } catch (error) {
    console.error('设置安全问题失败:', error)
    alert("设置失败，请重试")
    return false
  } finally {
    isLoading.value = false
  }
}

// 步骤1：输入用户名
async function handleStep1() {
  await checkUsername(true) // 传入true表示自动跳转
}

// 切换问题选择状态
function toggleQuestion(questionId) {
  console.log('切换问题选择:', questionId, '当前状态:', answers[questionId])
  if (answers[questionId] !== undefined) {
    // 如果已选择，则取消选择
    delete answers[questionId]
    console.log('取消选择问题:', questionId)
  } else {
    // 如果未选择，则选择
    answers[questionId] = ''
    console.log('选择问题:', questionId)
  }
  console.log('选择后answers:', answers)
}

// 步骤2：选择问题
function handleStep2() {
  const selectedCount = Object.keys(answers).filter(key => answers[key] !== undefined).length
  console.log('当前选择的问题数量:', selectedCount)
  console.log('当前answers对象:', answers)
  console.log('当前selectedQuestions:', selectedQuestions.value)
  
  if (selectedCount >= 2) {
    currentStep.value = 3
    errorMsg.value = '' // 清除错误信息
    // 强制重新渲染
    nextTick(() => {
      console.log('步骤3渲染完成，检查输入框')
    })
  } else {
    errorMsg.value = "至少需要选择2个安全问题"
  }
}

// 步骤3：回答问题
async function handleStep3() {
  console.log('handleStep3 被调用')
  console.log('当前 answers 对象:', answers)
  
  // 检查是否回答了足够的问题
  const answeredCount = Object.keys(answers).filter(key => answers[key] && answers[key].trim()).length
  console.log('已回答问题数量:', answeredCount)
  
  if (answeredCount < 2) {
    errorMsg.value = "请至少回答2个问题"
    console.log('问题数量不足，显示错误信息')
    return
  }
  
  console.log('开始验证答案...')
  const verifyResult = await verifyAnswers()
  console.log('验证结果:', verifyResult)
  
  if (verifyResult) {
    console.log('验证成功，跳转到步骤4')
    currentStep.value = 4
    errorMsg.value = '' // 清除错误信息
  } else {
    console.log('验证失败，停留在步骤3')
    errorMsg.value = answersMsg.value || "验证失败，请重试"
  }
}

// 步骤4：重置密码
async function handleStep4() {
  console.log('handleStep4 被调用')
  console.log('新密码:', newPassword.value)
  console.log('确认密码:', confirmPassword.value)
  
  const passwordValid = checkNewPassword()
  const confirmValid = checkConfirmPassword()
  
  console.log('密码格式检查:', passwordValid)
  console.log('确认密码检查:', confirmValid)
  
  if (passwordValid && confirmValid) {
    console.log('开始重置密码...')
    await resetPassword()
  } else {
    console.log('密码检查失败，无法重置')
  }
}

// 返回上一步
function goBack() {
  if (currentStep.value > 1) {
    currentStep.value--
    errorMsg.value = '' // 清除错误信息
  }
}

// 监听步骤变化，清除错误信息
watch(currentStep, (newStep, oldStep) => {
  if (newStep !== oldStep) {
    errorMsg.value = '' // 切换步骤时清除错误信息
  }
})

// 初始化particlesJS
function initParticles() {
  try {
    if (typeof window !== 'undefined' && window.particlesJS) {
      window.particlesJS("particles-bg", {
        "particles": {
          "number": { "value": 40, "density": { "enable": true, "value_area": 800 } },
          "color": { "value": "#ffffff" },
          "shape": { "type": "circle" },
          "opacity": { "value": 0.7, "random": true },
          "size": { "value": 8, "random": true },
          "move": {
            "enable": true,
            "speed": 1.5,
            "direction": "top",
            "straight": false,
            "out_mode": "out"
          }
        },
        "interactivity": {
          "events": {
            "onhover": { "enable": true, "mode": "bubble" },
            "onclick": { "enable": true, "mode": "repulse" }
          },
          "modes": {
            "bubble": { "distance": 120, "size": 12, "duration": 2, "opacity": 0.6 },
            "repulse": { "distance": 100, "duration": 0.4 }
          }
        },
        "retina_detect": true
      });
    }
  } catch (error) {
    console.warn('ParticlesJS initialization failed:', error);
  }
}

// 组件挂载时初始化particles
onMounted(() => {
  // 延迟初始化，确保DOM已渲染
  setTimeout(() => {
    initParticles();
  }, 100);
});
</script>

<template>
  <div id="particles-bg"></div>
  
  <div class="forgot-password-bg">
    <div class="forgot-password-card">
      <h2 class="forgot-password-title">忘记密码</h2>
      <div class="forgot-password-subtitle">通过安全问题重置密码</div>
      
      <!-- 进度指示器 -->
      <div class="progress-indicator">
        <div class="progress-step" :class="{ active: currentStep >= 1, completed: currentStep > 1 }">
          <span class="step-number">1</span>
          <span class="step-text">输入用户名</span>
        </div>
        <div class="progress-step" :class="{ active: currentStep >= 2, completed: currentStep > 2 }">
          <span class="step-number">2</span>
          <span class="step-text">选择问题</span>
        </div>
        <div class="progress-step" :class="{ active: currentStep >= 3, completed: currentStep > 3 }">
          <span class="step-number">3</span>
          <span class="step-text">回答问题</span>
        </div>
        <div class="progress-step" :class="{ active: currentStep >= 4 }">
          <span class="step-number">4</span>
          <span class="step-text">重置密码</span>
        </div>
      </div>

      <!-- 错误信息 -->
      <div v-if="errorMsg" class="error-message">
        {{ errorMsg }}
      </div>

      <!-- 步骤1：输入用户名 -->
      <div v-if="currentStep === 1" class="step-content">
        <div class="form-group">
          <label for="usernameInput">用户名</label>
          <div class="input-wrapper">
            <span class="input-icon">👤</span>
            <input 
              class="ipt" 
              type="text" 
              id="usernameInput" 
              v-model="username" 
              placeholder="请输入用户名"
              @blur="checkUsername(true)"
              @keyup.enter="handleStep1"
            >
          </div>
          <span class="msg" v-text="usernameMsg"></span>
        </div>
        <div class="button-container">
          <button class="btn-primary" @click="handleStep1" :disabled="isLoading">
            {{ isLoading ? '检查中...' : '下一步' }}
          </button>
        </div>
      </div>

      <!-- 步骤2：选择问题 -->
      <div v-if="currentStep === 2" class="step-content">
        <div class="form-group">
          <label>请选择要回答的安全问题（至少选择2个）</label>
          <div class="questions-list">
            <div 
              v-for="(question, index) in selectedQuestions" 
              :key="question?.id || index"
              class="question-item"
              :class="{ selected: question && answers[question.id] !== undefined }"
              @click="question && toggleQuestion(question.id)"
            >
              <input 
                type="checkbox" 
                :id="`question-${question?.id}`"
                :checked="question && answers[question.id] !== undefined"
                @change="question && toggleQuestion(question.id)"
              >
              <label :for="`question-${question?.id}`">{{ question?.question || question?.questionText }}</label>
            </div>
          </div>
        </div>
        <div class="button-container">
          <button class="btn-secondary" @click="goBack">上一步</button>
          <button class="btn-primary" @click="handleStep2">下一步</button>
        </div>
      </div>

      <!-- 步骤3：回答问题 -->
      <div v-if="currentStep === 3" class="step-content">
        <div class="form-group">
          <label>请回答选中的安全问题</label>
          <div class="answers-list">
            
            <div 
              v-for="(question, index) in selectedQuestions.filter(q => q && answers[q.id] !== undefined)" 
              :key="`${question?.id}-${index}`"
              class="answer-item"
            >
              <label :for="`answer-${question?.id}`">{{ question?.question || question?.questionText }}</label>
              <div class="input-wrapper">
                <span class="input-icon">💭</span>
                <input 
                  class="ipt" 
                  type="text" 
                  :id="`answer-${question?.id}`"
                  v-model="answers[question?.id]" 
                  placeholder="请输入答案"
                >
              </div>
            </div>
          </div>
        </div>
        <div class="button-container">
          <button class="btn-secondary" @click="goBack">上一步</button>
          <button class="btn-primary" @click="handleStep3" :disabled="isLoading">
            {{ isLoading ? '验证中...' : '验证答案' }}
          </button>
        </div>
      </div>

      <!-- 步骤4：重置密码 -->
      <div v-if="currentStep === 4" class="step-content">
        <div class="form-group">
          <label for="newPasswordInput">新密码</label>
          <div class="input-wrapper">
            <span class="input-icon">🔒</span>
            <input 
              class="ipt" 
              type="password" 
              id="newPasswordInput" 
              v-model="newPassword" 
              placeholder="请输入新密码（8-20位，包含大小写字母、数字、特殊字符）"
              @blur="checkNewPassword"
            >
          </div>
          <span class="msg" v-text="passwordMsg"></span>
        </div>
        <div class="form-group">
          <label for="confirmPasswordInput">确认新密码</label>
          <div class="input-wrapper">
            <span class="input-icon">🔒</span>
            <input 
              class="ipt" 
              type="password" 
              id="confirmPasswordInput" 
              v-model="confirmPassword" 
              placeholder="请再次输入新密码（8-20位，包含大小写字母、数字、特殊字符）"
              @blur="checkConfirmPassword"
            >
          </div>
          <span class="msg" v-text="confirmPasswordMsg"></span>
        </div>
        <div class="button-container">
          <button class="btn-secondary" @click="goBack">上一步</button>
          <button class="btn-primary" @click="handleStep4" :disabled="isLoading">
            {{ isLoading ? '重置中...' : '重置密码' }}
          </button>
        </div>
      </div>

      <div class="login-tip">
        想起密码了？<router-link to="/login" class="login-link">返回登录</router-link>
      </div>
    </div>
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  height: 100%;
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}

#particles-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #d6e0ff 0%, #e0c3fc 100%);
  z-index: -1;
  overflow: hidden;
}

/* particles.js 会自动处理粒子样式 */

.forgot-password-bg {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.forgot-password-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.13);
  padding: 36px 30px 24px 30px;
  min-width: 400px;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.forgot-password-title {
  text-align: center;
  color: #2d2d4b;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 6px;
}

.forgot-password-subtitle {
  text-align: center;
  color: #888;
  font-size: 15px;
  margin-bottom: 22px;
}

/* 进度指示器 */
.progress-indicator {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  position: relative;
}

.progress-indicator::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  height: 2px;
  background: #e0e0ef;
  z-index: 1;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

.step-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e0e0ef;
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.step-text {
  font-size: 12px;
  color: #888;
  text-align: center;
}

.progress-step.active .step-number {
  background: #b39ddb;
  color: #fff;
}

.progress-step.completed .step-number {
  background: #4caf50;
  color: #fff;
}

/* 错误信息 */
.error-message {
  background: #ffebee;
  color: #c62828;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 20px;
  border-left: 4px solid #c62828;
}

/* 步骤内容 */
.step-content {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
}

.form-group label {
  margin-bottom: 6px;
  color: #3a7ca5;
  font-size: 15px;
  font-weight: 500;
}

.input-wrapper {
  display: flex;
  align-items: center;
  background: #f7f7fb;
  border-radius: 6px;
  border: 1.5px solid #e0e0ef;
  padding: 0 10px;
  transition: border-color 0.2s;
}

.input-wrapper:focus-within {
  border-color: #b39ddb;
}

.input-icon {
  font-size: 18px;
  color: #b39ddb;
  margin-right: 6px;
}

.ipt {
  border: none;
  background: transparent;
  padding: 10px 0;
  font-size: 16px;
  outline: none;
  flex: 1;
}

.msg {
  min-height: 18px;
  font-size: 13px;
  margin-top: 3px;
  color: #e74c3c;
  transition: color 0.2s;
}

/* 问题列表 */
.questions-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #e0e0ef;
  border-radius: 6px;
  padding: 10px;
}

.question-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.question-item:hover {
  background: #f7f7fb;
}

.question-item.selected {
  background: #e8f5e8;
  border: 1px solid #4caf50;
}

.question-item input[type="checkbox"] {
  margin-right: 10px;
}

.question-item label {
  margin: 0;
  cursor: pointer;
  flex: 1;
}

/* 答案列表 */
.answers-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.answer-item {
  margin-bottom: 15px;
}

.answer-item label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #2d2d4b;
}

/* 按钮容器 */
.button-container {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}

.btn-primary {
  border: none;
  border-radius: 6px;
  padding: 12px 24px;
  background: linear-gradient(90deg, #b39ddb 0%, #a18cd1 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 120px;
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(90deg, #a18cd1 0%, #b39ddb 100%);
  transform: translateY(-2px);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  border: 1.5px solid #b39ddb;
  border-radius: 6px;
  padding: 12px 24px;
  background: transparent;
  color: #b39ddb;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 120px;
}

.btn-secondary:hover {
  background: #b39ddb;
  color: #fff;
}

.login-tip {
  text-align: center;
  color: #888;
  font-size: 14px;
  margin-top: 20px;
}

.login-link {
  color: #b39ddb;
  text-decoration: none;
  margin-left: 2px;
  transition: color 0.2s;
}

.login-link:hover {
  color: #7e57c2;
}

@media (max-width: 480px) {
  .forgot-password-card {
    padding: 20px 15px;
    min-width: unset;
  }
  
  .progress-indicator {
    flex-direction: column;
    gap: 10px;
  }
  
  .progress-indicator::before {
    display: none;
  }
  
  .button-container {
    flex-direction: column;
  }
  
  .btn-primary, .btn-secondary {
    width: 100%;
  }
}
</style>

